<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
  <style>
    body{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
    ul,li{
      list-style-type: none;
      margin:0;
      padding:0
    }
    li{
      display: block;
      padding:10px 20px;
      background:#aaa;
      color:#fff;
      border-radius: 5px;
      margin-top:20px;
      text-align: center;
    }
    .but{
      height: 44px;
      background-color: #f09; color: #fff;
      position: absolute; bottom: 0; left: 0; right: 0;
    }
  </style>
  <title>js call native api</title>
</head>
<body>
<ul>
  <li onclick="test1()">test<span id="test"></span></li>
  <li onclick="changeText()">TEXT:<span id="text"></span></li>
  <li onclick="showCookie()">showCookie:<span id="showCookie"></span></li>
  <li onclick="clearCookie()">clearCookie:<span id="clearCookie"></span></li>
  <li onclick="alert('msg')">alert('msg')</li>
  <li onclick="confirm('msg')">confirm('msg')</li>
  <li onclick="prompt('msg')">prompt('msg')</li>
  <li onclick="prompt('msg', 'default')">prompt('msg', 'default')</li>
</ul>
<div class="but">红色按钮</div>
<script>
  window.MikeSDK = {};
  function test1 () {
    var ts = Date.now();
    MikeSDK['cb' + ts] = function (arg) {
      var res = prompt(JSON.stringify(arg));
      document.getElementById('test').innerHTML = res;
    };
    window.webkit.messageHandlers.nativeObject.postMessage({
      ts: ts,
      action: 'test',
      params: 'params, ts:' + ts,
      callback: 'MikeSDK.cb' + ts,
    });
  }
  function changeText () {
    var ts = Date.now();
    MikeSDK['cb' + ts] = function (arg) {
      document.getElementById('text').innerHTML = JSON.stringify(arg);
    };
    window.webkit.messageHandlers.nativeObject.postMessage({
      ts: ts,
      action: 'TEXT',
      params: 'params, ts:' + ts,
      callback: 'MikeSDK.cb' + ts,
    });
  }
  function showCookie () {
    cookie.set('test-ts', Date.now());
    alert(document.cookie);
  }
  function clearCookie () {
    var keys = document.cookie.match(/[^ =;]+(?=\=)/g);
    if (!keys) return;
    keys.forEach(function (name) {
        cookie.set(name, 0, new Date());
    });
  }
  var cookie = {
      get: function (key) {
          var reg = new RegExp('(^| )' + key + '=([^;]*)(;|$)');
          var arr = document.cookie.match(reg);
          if (arr) {
              return unescape(arr[2]);
          } else {
              return null;
          }
      },
      set: function (key, value, exp) {
          var Days = 360;
          if (!exp) {
              exp = new Date();
              exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
          }
          document.cookie = key + '=' + escape(value) + ';path=/;domain=oschina.io;expires=' + exp.toGMTString();
      },
  };
</script>
</body>
</html>
